/**
 * index 页面样式
 */
.main {
  width: 100%;
  height: 100%;
}
/* 箭头 */
.arrow {
  display: block;
  width: 42px;
  height: 18px;
  position: absolute;
  bottom: 55px;
  left: 50%;
  margin-left: -21px;
  z-index: 99;
  animation: arrow-ani 3s infinite;
}
.arrow-w {
  @include bg-wh('../img/icon/arrow_w.png');
}
.swiper-container {
  width: 100%;
  height: 100%;
  background: url("../img/bg-1.jpg") no-repeat;
  background-size: cover;
}
.swiper-slide {
  &>div {
    width: 100%;
    height: 100%;
  }
}
.page {
  position: relative;
  &-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;

    .fill-remaining-space {
      flex: auto; // flex: 1 1 auto
    }
  }
  &-1 {
    &-logo {
      position: relative;
      //top: -20px;
      margin-bottom: 10px;
      @include bg-wh("../img/icon/title-2.png");
    }
    &-title {
      position: relative;
      top: 48.2%;
      left: 30px;
      font-size: 28px;
      color: #f8f8f8;
      opacity: .85;
      span {}
    }
    &-txt {
      padding: 10px 30px 10px;
      color: #f8f8f8;
      //opacity: .85;
      //text-indent: 30px;
      >h5 {
        font-size: 29px;
      }
      >p {
        font-size: 28px;
        margin-bottom: 5px;
        opacity: .85;
        text-indent: 30px;
        text-align: justify;
      }
    }
    &-sign {
      position: relative;
      right: -160px;
      @include bg-wh("../img/icon/sign-2.png");
    }
  }
  &-2 {
    &-info {
      margin-bottom: 30px;
      @extend %page-info;
      &-title {
        @extend %page-info-title;
      }
      &-txt {
        @extend %page-info-txt;
      }
    }
  }
  &-3 {
    &-info {
      margin-bottom: 30px;

      @extend %page-info;
      &-title {
        @extend %page-info-title;
      }
      &-txt {
        @extend %page-info-txt;
      }
    }
  }
  &-4 {
     &-info {
       margin-bottom: 30px;
       @extend %page-info;
       &-title {
         @extend %page-info-title;
       }
       &-arrange {
         @include bg-wh("../img/img-2.png");
       }
     }
   }
  &-5 {
    &-info {
      margin-bottom: 30px;
      @extend %page-info;
      &-title {
        @extend %page-info-title;
      }
      &-activity {
        img {
          width: 88%;
        }
      }
    }
  }
  &-6 {
    &-info {
      margin-bottom: 30px;
      @extend %page-info;
      &-title {
        @extend %page-info-title;
      }
      &-activity {
        img {
          width: 88%;
        }
      }
    }
  }
  &-7 {
    &-info {
      margin-bottom: 30px;

      @extend %page-info;
      &-title {
        @extend %page-info-title;
      }
      &-seat {
        @include bg-wh("../img/seat.jpg");
      }
    }
  }
  &-8 {
    &-info {
      margin-bottom: 30px;

      @extend %page-info;
      &-title {
        @extend %page-info-title;
      }
      &-txt {
        position: relative;
        padding: 5px 35px;
        font-size: 30px;
        opacity: .85;
        text-align: left;
      }
    }
  }
  //&-9 {
  //  &-info {
  //    margin-bottom: 30px;
  //
  //    @extend %page-info;
  //    &-title {
  //      @extend %page-info-title;
  //      margin-bottom: 20px;
  //    }
  //    &-txt {
  //      @extend %page-info-txt;
  //      margin-bottom: 20px;
  //    }
  //    &-code {
  //      img {
  //        width: 50%;
  //      }
  //    }
  //  }
  //}
}


%page {
  &-info {
    text-align: center;
    color: #f8f8f8;
    &-title {
      font-size: 32px;
      font-weight: bold;
    }
    &-txt {
      position: relative;
      padding: 0 25px;
      font-size: 30px;
      opacity: .85;
    }
  }
}

@keyframes arrow-ani {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
